<script setup>
import {ref} from "vue";
import { loadRootRole } from '@/api/root/right.js'
let list = ref([])

const initRoleData = async function () {
  list.value = await loadRootRole()
  console.log(list)
};
initRoleData()
</script>
<template>
  <el-card>
    <template #header>角色管理</template>
    <div class="nav-bar">
      <div>
        <el-button type="success">
          <template #icon>
            <el-icon><EpPlus /></el-icon>
          </template>
          <span>添加新角色</span>
        </el-button>
      </div>
    </div>
    <el-table border stripe :data="list">
      <template #empty>
        <el-result title="暂无数据">
          <template #icon>
            <el-icon size="50"><EpBox /></el-icon>
          </template>
        </el-result>
      </template>
      <el-table-column type="expand" #default="{row}">
        <li v-for="item in row.rights" style="margin:15px 0 0 25px">{{item.right_name}}：
          <el-tag effect="dark" v-if="(item.right_function&1)===1">GET(查询)</el-tag>
          <el-tag effect="dark" v-if="(item.right_function&2)===2" type="success">POST(添加)</el-tag>
          <el-tag effect="dark" v-if="(item.right_function&4)===4" type="warning">PUT(更新)</el-tag>
          <el-tag effect="dark" v-if="(item.right_function&8)===8" type="warning">DELETE(删除)</el-tag>
        </li>
      </el-table-column>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="角色名称" prop="role_name"></el-table-column>
      <el-table-column label="权限数量" #default="{row}">
        <div>{{row.rights.length}}</div>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <el-button type="primary">权限分配</el-button>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<style scoped>
.nav-bar{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 14px;
}
.nav-bar .el-input{
    width: 180px;
    margin-right: 10px;
}
.el-pagination{
    margin-top: 14px;
    justify-content: center;
}
</style>
